<div
  bsModal
  #actionModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="actionModal"
  aria-hidden="true"
  [config]="{ backdrop: 'static' }"
>
  <div class="modal-dialog {{modalSize}} {{isFullScreen?'modal-full-screen':''}}">
    <div class="modal-content" style="height: 100%;">
      <div class="modal-header">
        <h4 class="modal-title">详细信息</h4>

        <div class="modal-header__head-tools">
          <ul class="modal-header__nav">
            <li class="modal-header__nav-item">
              <a
                href="javascript:;"
                (click)="fullScreen()"
                title="{{isFullScreen?'取消全屏':'全屏'}}"
                modal-header-tool="fullscreen"
                class="modal-header__nav-link modal-header__nav-link--icon"
              >
                <i class="la la-expand"></i>
              </a>
            </li>
            <li class="modal-header__nav-item">
              <a
                href="javascript:;"
                (click)="close()"
                title="关闭窗口"
                modal-header-tool="remove"
                class="modal-header__nav-link modal-header__nav-link--icon"
              >
                <i class="la la-close"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="modal-body">
        <div class="full-screen-content {{isFullScreen?'m-scrollable m-scrollable-full-screen':''}}">
          <div class="row work-shop-proc">
            <div class="col-md-12 pl-0">
              <div style="padding: 10px;">
                <h5 class="mb-4"><i class="fa fa-cubes"></i> 基本信息</h5>
                <table class="table" id="pipe-table">
                  <thead>
                    <tr style="background-color: #c7c7c7!important;font-size: 1rem;font-weight: 600;">
                      <td>任务号</td>
                      <td>图号</td>
                      <td>任务名称</td>
                      <td>投产数量</td>
                      <td>开始时间</td>
                      <td>完成时间</td>
                      <td>计划完成时间</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr style="background-color: #5867DD !important;color: #fff !important;">
                      <td>
                        <span> {{ pipelineAndActsDetail.taskCode }} </span>
                      </td>
                      <td>
                        <span> {{ pipelineAndActsDetail.drawingCode }} </span>
                      </td>
                      <td>
                        <span> {{ pipelineAndActsDetail.taskName }} </span>
                      </td>
                      <td>
                        <span> {{ pipelineAndActsDetail.amountPlanned }} </span>
                      </td>
                      <td>
                        <span>{{ pipelineAndActsDetail.canStartDate | momentFormat: 'YYYY-MM-DD' }}</span>
                      </td>
                      <td>
                        <span>{{ pipelineAndActsDetail.finishedDate | momentFormat: 'YYYY-MM-DD' }}</span>
                      </td>
                      <td>
                        <span>{{ pipelineAndActsDetail.dueDatePlanned | momentFormat: 'YYYY-MM-DD' }}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table class="table" id="pipe-table" style="margin-top:10px">
                  <thead>
                    <tr style="background-color: #c7c7c7!important;font-size: 1rem;font-weight: 600;text-align: center">
                      <td>牌号</td>
                      <td>状态</td>
                      <td>标准</td>
                      <td>物资名称</td>
                      <td>材料/产品</td>
                      <td>规格</td>
                      <td>尺寸</td>
                      <td>备注</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr style="background-color: #5867DD !important;color: #fff !important; text-align: center">
                      <td>
                        <span> {{ bill.paiHao }} </span>
                      </td>
                      <td>
                        <span> {{ bill.materialStatus }} </span>
                      </td>
                      <td>
                        <span> {{ bill.paiHaoStandard }} </span>
                      </td>
                      <td>
                        <span> {{ bill.materialName }} </span>
                      </td>
                      <td>
                        <span> {{ bill.productAmount }} </span>
                      </td>
                      <td>
                        <span> {{ bill.materialSpec }} </span>
                      </td>
                      <td>
                        <span> {{ bill.materialSize }} </span>
                      </td>
                      <td>
                        <span> {{ bill.remark }} </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <p-table
                  [value]="outs"
                  rows="10"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr style="height: 50px;background-color: #c7c7c7;">
                      <th width="80px">出库数量</th>
                      <th width="120px">出库位置</th>
                      <th *ngFor="let col of selectedColumns" width="{{col.width}}">{{ col.header }}</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record>
                    <tr style="background-color: #5867DD !important; color: #fff">
                      <th width="80px">{{ record.quantity }}</th>
                      <th width="120px">{{ record.locationName }}</th>
                      <td *ngFor="let col of selectedColumns" width="{{col.width}}">{{ record[col.field] }}</td>
                    </tr>
                  </ng-template>
                </p-table>
                <table class="table" id="pipe-table" style="margin-top:10px">
                  <thead>
                    <tr style="background-color: #c7c7c7!important;font-size: 1rem;font-weight: 600;">
                      <td>标号</td>
                      <td>编者</td>
                      <td>时间</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr style="background-color: #5867DD !important;color: #fff !important;">
                      <td>
                        <span> {{ techDocs.codeId }} </span>
                      </td>
                      <td>
                        <span> {{ techDocs.editor }} </span>
                      </td>
                      <td>
                        <span>{{ techDocs.editTime | momentFormat: 'YYYY-MM-DD' }}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- 节点 -->
            <div class="col-md-12 pl-0">
              <div style="padding: 10px;">
                <h5 class="mb-4"><i class="fa fa-cubes"></i> 节点信息</h5>
                <div *ngFor="let pipelineAndAct of pipelineAndActs">
                  <div *ngIf="pipelineAndAct.actName == '工艺校验'">
                    <div class="alert" style="border-color: #45aaf8;">
                      <div class="proc-info-item" style="height:22px!important">
                        <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                        <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                        <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                        <code>{{ pipelineAndAct.execuUser }}</code>
                        <span class="m-badge m-badge--info" style="margin-left:10%">开始时间：</span>
                        <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD' }}</code>
                        <span class="m-badge m-badge--info" style="margin-left:10%">结束时间：</span>
                        <code>{{ pipelineAndAct.endTime | momentFormat: 'YYYY-MM-DD' }}</code
                        ><br />
                      </div>
                    </div>
                  </div>

                  <div class="alert" style="border-color: #45aaf8;" *ngIf="pipelineAndAct.actName != '工艺校验'">
                    <div class="proc-info-item" style="height:50px!important">
                      <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                      <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                      <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                      <code>{{ pipelineAndAct.execuUser }}</code>
                      <span class="m-badge m-badge--info" style="margin-left:10%">开始时间：</span>
                      <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD' }}</code>
                      <span class="m-badge m-badge--info" style="margin-left:10%">结束时间：</span>
                      <code>{{ pipelineAndAct.endTime | momentFormat: 'YYYY-MM-DD' }}</code>
                      <div style="margin-top:10px">
                        <span class="m-badge m-badge--info">备注：</span> <code>{{ pipelineAndAct.remark }}</code>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 废弃方法 -->
            <!--
              <div class="col-md-12 pl-0">
                <div style="padding: 10px;">
                  <h5 class="mb-4"><i class="fa fa-cubes"></i> 节点信息</h5>
                  <div *ngFor="let pipelineAndAct of pipelineAndActs">
                    <div *ngIf="pipelineAndAct.actName == '绑定主制班组'">
                      <div class="alert" style="border-color: #45aaf8;">
                        <div class="proc-info-item" style="height:22px!important">
                          <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                          <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                          <span class="m-badge m-badge--success" style="margin-left:10%">主制班组：</span>
                          <code>{{ pipelineAndActsDetail.teamGroupName }}</code>
                          <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                            <code>{{ pipelineAndAct.execuUser }}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                            <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                        </div>
                      </div>
                    </div>

                    <div *ngIf="pipelineAndAct.actName == '工艺校验'">
                      <div class="alert" style="border-color: #45aaf8;">
                        <div class="proc-info-item" style="height:105px!important">
                          <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                          <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                          <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                            <code>{{ pipelineAndAct.execuUser }}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                            <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                          <table class="table" id="pipe-table" style="margin-top:10px">
                            <thead>
                              <tr
                                style="background-color: #c7c7c7!important;font-size: 1rem;font-weight: 600;text-align: center"
                              >
                                <td>标号</td>
                                <td>编者</td>
                                <td>时间</td>
                              </tr>
                            </thead>
                            <tbody>
                              <tr style="background-color: #5867DD !important;color: #fff !important; text-align: center">
                                <td>
                                  <span> {{ techDocs.codeId }} </span>
                                </td>
                                <td>
                                  <span> {{ techDocs.editor }} </span>
                                </td>
                                <td>
                                  <span>{{ techDocs.editTime | momentFormat: 'YYYY-MM-DD' }}</span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>

                    <div *ngIf="pipelineAndAct.actName == '生成工序'">
                        <div class="alert" style="border-color: #45aaf8;">
                          <div class="proc-info-item" style="height:22px!important">
                            <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                            <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                            <code>{{ pipelineAndAct.execuUser }}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                            <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">备注：</span>
                            <code>{{ pipelineAndAct.remark}}</code>
                          </div>
                        </div>
                      </div>

                    <div *ngIf="pipelineAndAct.actName == '物料需求单'">
                      <div class="alert" style="border-color: #45aaf8;">
                        <div class="proc-info-item" style="height:175px!important">
                          <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                          <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                          <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                          <code>{{ pipelineAndAct.execuUser }}</code>
                          <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                          <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                          <div
                            *ngFor="let bill of bills"
                            class="m-demo"
                            data-code-preview="true"
                            data-code-html="true"
                            data-code-js="false"
                            style="margin-top:10px"
                          >
                            <div class="m-demo__preview text-center" style="padding: 10px;">
                              <div class="row">
                                <div class="col-md-2">
                                  <small class="text-muted">任务编号</small>
                                  <h6 style="margin-top: 10px;">{{ subTaskCode }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">图号</small>
                                  <h6 style="margin-top: 10px;">{{ drawingCode }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">投产数量</small>
                                  <h6 style="margin-top: 10px;">{{ bill.amountPlanned }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">牌号</small>
                                  <h6 style="margin-top: 10px;">{{ bill.paiHao }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">状态</small>
                                  <h6 style="margin-top: 10px;">{{ bill.materialStatus }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">标准</small>
                                  <h6 style="margin-top: 10px;">{{ bill.paiHaoStandard }}</h6>
                                </div>
                              </div>
                              <div class="row mt-4">
                                <div class="col-md-2">
                                  <small class="text-muted">物资名称</small>
                                  <h6 style="margin-top: 10px;">{{ bill.materialName }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">材料/产品</small>
                                  <h6 style="margin-top: 10px;">{{ bill.productAmount }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">规格</small>
                                  <h6 style="margin-top: 10px;">{{ bill.materialSpec }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">尺寸</small>
                                  <h6 style="margin-top: 10px;">{{ bill.materialSize }}</h6>
                                </div>
                                <div class="col-md-2">
                                  <small class="text-muted">备注</small>
                                  <h6 style="margin-top: 10px;">{{ bill.remark }}</h6>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div *ngIf="pipelineAndAct.actName == '发料'">
                        <div class="alert" style="border-color: #45aaf8;">
                          <div class="proc-info-item" style="height:135px!important">
                            <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                            <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                            <code>{{ pipelineAndAct.execuUser }}</code>
                            <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                            <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                            <div style="margin-top:10px"></div>
                            <p-table
                            [value]="outs"
                            rows="10"
                            [paginator]="false"
                            [scrollable]="true"
                            ScrollWidth="100%"
                            [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns"

                          >
                            <ng-template pTemplate="header">
                              <tr style="height: 50px;background-color: #e6e6e6;">
                                <th width="80px">出库数量</th>
                                <th width="120px">出库位置</th>
                                <th *ngFor="let col of selectedColumns" width="{{col.width}}">{{ col.header }}</th>
                              </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record>
                              <tr>
                                <th width="80px">{{ record.quantity }}</th>
                                <th width="120px">{{ record.locationName }}</th>
                                <td *ngFor="let col of selectedColumns" width="{{col.width}}">{{ record[col.field] }}</td>
                              </tr>
                            </ng-template>
                          </p-table>

                          </div>
                        </div>
                      </div>

                      <div *ngIf="pipelineAndAct.actName == '材料成本记录'">
                          <div class="alert" style="border-color: #45aaf8;">
                            <div class="proc-info-item" style="height:22px!important">
                              <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                              <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                              <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                              <code>{{ pipelineAndAct.execuUser }}</code>
                              <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                              <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                            </div>
                          </div>
                        </div>

                      <div *ngIf="pipelineAndAct.actName == '记录质控卡'">
                          <div class="alert" style="border-color: #45aaf8;">
                            <div class="proc-info-item" style="height:22px!important">
                              <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                              <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                              <span class="m-badge m-badge--info" style="margin-left:10%">质控卡号：</span>
                              <code>{{ pipelineAndActsDetail.zhikongkaNo }}</code>
                              <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                              <code>{{ pipelineAndAct.execuUser }}</code>
                              <span class="m-badge m-badge--info" style="margin-left:10%">操作时间：</span>
                              <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                            </div>
                          </div>
                        </div>

                        <div *ngIf="pipelineAndAct.actName == '生成条码' || pipelineAndAct.actName == '打印条码' || pipelineAndAct.actTypeName == '工序执行类' || pipelineAndAct.actName == '打印交接单' || pipelineAndAct.actName == '完成任务' ">
                            <div class="alert" style="border-color: #45aaf8;">
                                <div class="proc-info-item" style="height:22px!important">
                                  <span class="m-badge m-badge--success">节点 {{ pipelineAndAct.seq }}</span>
                                  <code>{{ pipelineAndAct.actCode }}-{{ pipelineAndAct.actName }}</code>
                                  <span class="m-badge m-badge--info" style="margin-left:10%">操作者：</span>
                                  <code>{{ pipelineAndAct.execuUser }}</code>
                                  <span class="m-badge m-badge--info" style="margin-left:10%">开始时间：</span>
                                  <code>{{ pipelineAndAct.startTime | momentFormat: 'YYYY-MM-DD'}}</code>
                                  <span class="m-badge m-badge--info" style="margin-left:10%">结束时间：</span>
                                  <code>{{ pipelineAndAct.endTime | momentFormat: 'YYYY-MM-DD'}}</code>
                                  <span class="m-badge m-badge--info" style="margin-left:10%">备注：</span>
                                  <code>{{ pipelineAndAct.remark}}</code>
                                </div>
                              </div>
                        </div>

                      <div>

                      </div>

                  </div>
                </div>
              </div>
            -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
